<!--
 * @Description: 生成海报组件
 * @Version: 1.0.0
 * @Autor: hch
 * @Date: 2020-08-07 14:48:41
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-31 18:11:35
 * 保存海报按钮和关闭按钮 在html代码中写出来 绑定点击方法然后透明 再用canvas 覆盖
-->

<template>
	<view class="canvas-content" v-show="canvasShow" :style="'width:' + system.w + 'px; height:' + system.h + 'px;'">
		<!-- 遮罩层 -->
		<view class="canvas-mask"></view>
		<!-- 海报 -->
		<image class="posterUrl" v-if="posterUrl" :src="posterUrl"
			:style="'width:' + posterBgs.w + 'px; height:' + posterBgs.h + 'px;top:'+(posterBgs.y-20)+'px;left:'+(posterBgs.x)+'px;'"
			:width="posterBgs.w" :height="posterBgs.h"></image>
		<image class="posterNewImage" v-if="posterNewImage" :src="posterNewImage" style="z-index:608;"></image>
		<canvas v-if="canvasc" class="canvas" canvas-id="myCanvas" id="myCanvas"
			:style="'width:' + system.w + 'px; height:' + system.h + 'px;'" :width="system.w"
			:height="system.h"></canvas>

	</view>
</template>

<script>
	import {
		drawSquarePic,
		drawTextReturnH,
		getSystem
	} from './utils'
	export default {
		data() {
			return {
				system: {},
				canvasShow: false,
				posterUrl: '',
				posterNewImage: '',
				posterBgs: {},
				canvasc: 1
			}
		},
		props: {
			posterData: {
				type: Object,
				default: () => {
					return {}
				}
			},
		},
		computed: {
			/**
			 * @description: 计算海报背景数据
			 * @param {*}
			 * @return {*}
			 * @author: hch
			 */
			poster() {
				let data = this.posterData
				let system = this.system
				let py = (system.h - data.poster.h * system.scale) / 2;
				console.log(py);
				if (py <= 8) {
					py = 36;
				} else if (py <= 46) {
					py = py;
				} else {
					py = py - 46;
				}
				let posterBg = {
					url: data.poster.url,
					r: data.poster.r * system.scale,
					w: data.poster.w * system.scale,
					h: data.poster.h * system.scale,
					x: (system.w - data.poster.w * system.scale) / 2,
					y: py,
					p: data.poster.p * system.scale
				}
				this.posterBgs = posterBg
				// console.log(this.posterBgs)
				return posterBg
			},
			/**
			 * @description: 计算小程序码
			 * @param {*}
			 * @return {*}
			 * @author: hch
			 */
			codeImg() {
				let data = this.posterData
				let system = this.system
				let posterCode = {
					url: data.codeImg.url,
					r: data.codeImg.r * system.scale,
					w: data.codeImg.w * system.scale,
					h: data.codeImg.h * system.scale,
					x: data.codeImg.x,
					y: data.codeImg.mt * system.scale
				}
				return posterCode
			}
		},
		created() {
			// 获取设备信息
			this.system = getSystem()
			this.posterShow();
			// console.log(this.system)
		},
		methods: {
			/**
			 * @description: 展示海报
			 * @param {type}
			 * @return {type}
			 * @author: hch
			 */
			posterShow() {
				this.canvasShow = true;
				let posterData = this.posterData;
				let enabledAdmin = posterData.enabledAdmin || 0; //TODO 是否开开启在线后台获取二维码
				let nowStamp = new Date().getTime();
				console.log('【生成专属海报】现在:' + nowStamp + ";查询后台已开启二维码后端接口服务enabled=" + enabledAdmin, posterData);
				if (this.posterUrl) {
					return;
				}
				if (posterData && enabledAdmin == 1) {
					this.onlinePoster(); //TODO 后端生成海报
				} else {
					//TODO 原来的前端生成海报
					this.creatPoster();
				}
			},
			/**
			 * @description: 生成海报(后台生成)
			 * @author: xch
			 */
			async onlinePoster() {
				let _this = this;
				let _apiUrl = getApp().globalData.url;
				this.posterNewImage = '';
				uni.showLoading({
					title: '生成海报中...'
				});
				//TODO 远程调用二维码接口
				this.$api.request({
					url: _apiUrl + '/api/v1/UserInvite/doQrcode?type=2',
					method: 'POST',
					data: {},
					success: res => {
						uni.hideLoading();
						this.$api.isLoginApi(res);
						if (res.code == 200) {
							let nowStamp = new Date().getTime();
							console.log('【远程-获取海报】success -> nowTime' + nowStamp, res);
							//TODO 任务中心的数据接口
							let baseimg = res.data.content || '';
							_this.posterTimestamp = nowStamp;
							_this.posterNewImage = baseimg;
						} else {
							this.$api.msg(res.msg);
						}
					}
				});
			},
			/**
			 * @description: 生成海报
			 * @author: hch
			 */
			async creatPoster() {
				uni.showLoading({
					title: '生成入口中...'
				})
				const ctx = uni.createCanvasContext('myCanvas', this)
				this.ctx = ctx
				ctx.clearRect(0, 0, this.system.w, this.system.h) //清空之前的海报
				ctx.draw() //清空之前的海报 
				// 根据设备屏幕大小和距离屏幕上下左右距离，及圆角绘制背景
				let poster = this.poster
				let codeImg = this.codeImg
				await drawSquarePic(ctx, poster.x, poster.y, poster.w, poster.h, poster.r, poster.url)

				// 绘制二维码
				codeImg.url = codeImg.url.replace(/[\r\n]/g, '');
				await drawSquarePic(
					ctx,
					codeImg.x,
					codeImg.y,
					codeImg.w,
					codeImg.h,
					codeImg.r,
					codeImg.url
				)

				//2秒海报生成时间
				setTimeout(() => {
					uni.hideLoading()
					let _this = this
					uni.canvasToTempFilePath({
							x: this.poster.x,
							y: this.poster.y,
							width: this.poster.w, // 画布的宽
							height: this.poster.h, // 画布的高
							destWidth: this.poster.w * 5,
							destHeight: this.poster.h * 5,
							canvasId: 'myCanvas',
							success(res) {
								uni.hideLoading()
								// console.log(res.tempFilePath);
								// #ifdef H5
								// h5的时候 
								// console.log(_this.posterUrl)
								_this.posterUrl = res.tempFilePath;
								// _this.handleCanvasCancel()
								// _this.$emit('previewImage', res.tempFilePath)
								// #endif
							},
							fail(res) {
								console.log('fail -> res', res)
								uni.showToast({
									title: '保存失败，稍后再试',
									duration: 2000,
									icon: 'none'
								})
								uni.hideLoading()
							}
						},this);
				}, 1680);
			},
		}
	}
</script>

<style lang="scss">
	.content {
		height: 100%;
		text-align: center;
	}

	.canvas-content {
		position: relative;
		z-index: 10;

		.posterUrl {
			z-index: 11;
			position: fixed;
		}

		.posterNewImage {
			min-width: 285px;
			min-height: 551px;
			width: 90%;
			/*position: fixed; left: 13%;*/
			margin-top: 5%;
			border-radius: 10px;
			box-shadow: 0px 1px 2px #909399;
		}

		.canvas {
			z-index: -100;
			opacity: 0;
			visibility: hidden;
		}
	}
</style>